<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>org.brophy.js Library Demos</title>
    <script type="text/javascript">MochiKit = {__export__: false};</script>
    <script type="text/javascript" src="../MochiKit/MochiKit.js"></script>
    <script type="text/javascript" src="../org/brophy/js/constant.js"></script>
    <script type="text/javascript" src="../org/brophy/js/util.js"></script>
    <script type="text/javascript" src="../org/brophy/js/ajax.js"></script>
    <script type="text/javascript" src="../org/brophy/js/array.js"></script>
    <script type="text/javascript" src="../org/brophy/js/select.js"></script>
    <script type="text/javascript" src="../org/brophy/js/event.js"></script>
    <script type="text/javascript" src="../org/brophy/js/drag.js"></script>
    <script type="text/javascript" src="./org.brophy.js.demo.js"></script>
    <link rel="stylesheet" type="text/css" href="../org/brophy/css/org.brophy.js.css"/>
    <link rel="stylesheet" type="text/css" href="org.brophy.js.demo.css"/>

    <script type="text/javascript">
    //<![CDATA[
    
      // Global namespace to store all demo functions
      obj = {};

      window.onload = function()
      {
        org.brophy.js.demo.drawPageHeader("drag");

        var jsCode, htmlCode, instructions;
        
        /********************************************
         * org.brophy.js.drag.Dragger()
         ********************************************/ 
        jsCode = 
          "var dragger = new org.brophy.js.drag.Dragger();             \n" +
          "MochiKit.Iter.forEach(                                      \n" +
          "  MochiKit.Selector.findDocElements('button.drag1'),        \n" + 
          "  function(b)                                               \n" +
          "{                                                           \n" +
          "  dragger.setElementDraggable(b);                           \n" +
          "});                                                         \n";
  
        htmlCode = 
          "<style type='text/css'>                                       \n" + 
          "  button.drag1                                                \n" + 
          "  {                                                           \n" + 
          "    position: absolute;                                       \n" + 
          "    border: 2px solid black;                                  \n" + 
          "    height: 100px;                                            \n" + 
          "    width: 100px;                                             \n" + 
          "    opacity: 0.75;                                            \n" + 
          "    filter: alpha(opacity=75);                                \n" + 
          "  }                                                           \n" + 
          "  button.drag.active                                          \n" + 
          "  {                                                           \n" + 
          "    border: 2px solid white;                                  \n" + 
          "    font-weight:bold;                                         \n" + 
          "  }                                                           \n" + 
          "  button.red   { background-color: red;   left: 10px;  }      \n" +
          "  button.green { background-color: green; left: 120px; }      \n" +
          "  button.blue  { background-color: blue;  left: 230px; }      \n" +
          "  button.gray  { background-color: gray;  left: 340px; }      \n" +
          "</style>                                                      \n" +
          "                                                              \n" +
          "<div style='float:left; clear:left;margin-bottom: 500px;'>    \n" +
          "  <button class='drag1 red'>Test 1</button>                   \n" +
          "  <button class='drag1 green'>Test 2</button>                 \n" +
          "  <button class='drag1 blue'>Test 3</button>                  \n" +
          "  <button class='drag1 gray'>Test 4</button>                  \n" +
          "</div>                                                        \n";
             
        instructions = 
          "This is the simplest implementation of the Dragger() class.  In " + 
          "just a matter of lines, you can make all four of the boxes below " + 
          "draggable.  Drag Away!!!";
   
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.drag.Dragger()",
                             "demo_obj_drag_Dragger_simple",
                             htmlCode,
                             jsCode,
                             instructions);
        


        /********************************************
         * org.brophy.js.drag.Dragger() - simple
         ********************************************/ 
        jsCode = 
          "var dragger = new org.brophy.js.drag.Dragger({              \n" +
          "    'cloneNode' : true,                                     \n" +
          "                                                            \n" +
          "    'snap' : 50,                                            \n" +
          "                                                            \n" +
          "    'onStart' : function() {                                \n" +
          "      MochiKit.DOM.addElementClass(this.getTargetNode(),'active');\n" +
          "    },                                                      \n" +
          "                                                            \n" +
          "    'onStop' : function() {                                 \n" +
          "      MochiKit.DOM.removeElementClass(this.getTargetNode(),'active');\n" + 
          "    } } );                                                  \n" +
          "MochiKit.Iter.forEach(                                      \n" +
          "  MochiKit.Selector.findDocElements('button.drag2'),        \n" + 
          "  function(b)                                               \n" +
          "{                                                           \n" +
          "  dragger.setElementDraggable(b);                           \n" +
          "});                                                         \n";
  
        htmlCode = 
          "<style type='text/css'>                                       \n" + 
          "  button.drag2                                                \n" + 
          "  {                                                           \n" + 
          "    position: absolute;                                       \n" + 
          "    border: 2px solid black;                                  \n" + 
          "    height: 100px;                                            \n" + 
          "    width: 100px;                                             \n" + 
          "    opacity: 0.75;                                            \n" + 
          "    filter: alpha(opacity=75);                                \n" + 
          "  }                                                           \n" + 
          "  button.drag2.active                                          \n" + 
          "  {                                                           \n" + 
          "    border: 2px solid white;                                  \n" + 
          "    font-weight:bold;                                         \n" + 
          "  }                                                           \n" + 
          "  button.red   { background-color: red;   left: 10px;  }      \n" +
          "  button.green { background-color: green; left: 120px; }      \n" +
          "  button.blue  { background-color: blue;  left: 230px; }      \n" +
          "  button.gray  { background-color: gray;  left: 340px; }      \n" +
          "</style>                                                      \n" +
          "                                                              \n" +
          "<div style='float:left; clear:left;margin-bottom: 500px;'>    \n" +
          "  <button class='drag2 red'>Test 1</button>                   \n" +
          "  <button class='drag2 green'>Test 2</button>                 \n" +
          "  <button class='drag2 blue'>Test 3</button>                  \n" +
          "  <button class='drag2 gray'>Test 4</button>                  \n" +
          "</div>                                                        \n";
             
        instructions = 
          "This is a more complex implementation of the Dragger() class.  In " + 
          "just a matter of lines, you can make all four of the boxes below " + 
          "draggable.  Drag Away!!!";
   
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.drag.Dragger()",
                             "demo_obj_drag_Dragger_complex",
                             htmlCode,
                             jsCode,
                             instructions);
        
      }
  
    //]]>
    </script>
  
  </head> 
  
  <body>
  </body>
  
</html>
  
  
  
